<template>
    <TabBar>
        <TabBarItem v-for="(nav) in navs" v-bind:_path="nav.path" v-bind:img_path="nav.data_path"
                    v-bind:img_active_path="nav.data_active_path" v-bind:text="nav.title" :key="nav.path"/>
    </TabBar>
</template>

<script>
    import TabBar from "components/common/tabbar/TabBar";
    import TabBarItem from "components/common/tabbar/TabBarItem";
    export default {
        name: "MainTabBar",
        components:{
            TabBar,
            TabBarItem
        },
        data(){
            return{
                navs:[
                    {
                        data_path:require('assets/img/tabbar/home.svg'),
                        data_active_path: require('assets/img/tabbar/home_active.svg'),
                        title:'首页',
                        path:'/home'
                    },{
                        data_path:require('assets/img/tabbar/category.svg'),
                        data_active_path: require('assets/img/tabbar/category_active.svg'),
                        title:'分类',
                        path:'/category'
                    },{
                        data_path:require('assets/img/tabbar/shopcart.svg'),
                        data_active_path: require('assets/img/tabbar/shopcart_active.svg'),
                        title:'购物车',
                        path:'/cart'
                    },{
                        data_path:require('assets/img/tabbar/profile.svg'),
                        data_active_path: require('assets/img/tabbar/profile_active.svg'),
                        title:'我的',
                        path:'/profile'
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>